<template>
	<view>
		<!-- 头部 -->
		<view class="head">
			<view class="head_item" @click="select_city">{{ map.city || '城市' }}</view>
			<view class="head_item" @click="select_district">{{ map.district || '全城' }}</view>
		</view>
		<!-- 影院列表 -->
		<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrolltolower">
			<view style="height: 100rpx;"></view>
			<view class="scroll_item" v-for="(item, index) in cinema_list" :key="index" @click="time_btn(item)">
				<view class="scroll_item_info">
					<view class="scroll_item_info_name">{{ item.cinemaName }}</view>
					<view class="scroll_item_info_money">
						<!-- <text class="scroll_item_info_money_text">{{ item.money * 1 + 10 }}</text> -->
						{{ Math.floor(item.netPrice * 0.8) / 100 }} 元起
					</view>
					<view class="scroll_item_info_address">{{ item.address }}</view>
				</view>
				<view class="scroll_item_distance">{{ item.distance |calculate}}</view>
			</view>
		</scroll-view>
		<!-- 结果为空 -->
		<view class="empty" v-if="cinema_list.length<=0">
			<image src="../../static/empty.png" class="empty_img"></image>
			<view class="empty_text">抱歉啦,没有找到~</view>
		</view>
		<MyLoading :loading="loading" type="2" animation_updown="true"></MyLoading>
	</view>
</template>

<script>
import MyLoading from '@/components/my-loading/my-loading.vue';
import Route from '../../utils/route.js';
export default {
	components: {
		MyLoading
	},
	filters: {
		calculate(num) {
			let length = num.toString().length
			if(length>3 && length<7){
				return (num/1000).toFixed(2) + 'km'
			}else if(length>7){
				return (num/100000).toFixed(2) + 'km'
			}else{
				return num.toFixed(2) + 'm'
			}
		},
		
	},
	data() {
		return {
			loading:true,
			//地理位置
			map: {},
			//影院列表
			cinema_list: [],
			//页数
			page:1,
		};
	},
	onLoad() {},
	async onShow() {
		this.map = uni.getStorageSync('map');
		this.cinema_list = [];
		this.page = 1;
		this.get_cinema_list();
	},
	methods: {
		// 下拉加载
		async scrolltolower(){
			this.loading = true;
			this.page+=1;
			let res = await Route.cinema_list({
				latitude: this.map.latitude,
				longitude: this.map.longitude,
				cityId: this.map.city_code,
				areaName:this.map.district,
				page: this.page
			});
			this.loading = false;
			if(res.list.length==0){
				return uni.showToast({
					icon: 'none',
					title: '已经没有啦'
				});
			}

			this.cinema_list = this.cinema_list.concat(res.list);
		},
		// 获取影院列表
		async get_cinema_list(page = 1) {
			this.loading = true;
			let res = await Route.cinema_list({
				latitude: this.map.latitude,
				longitude: this.map.longitude,
				cityId: this.map.city_code,
				areaName:this.map.district,
				page: page
			});
			this.cinema_list = res.list;
			this.loading = false;
		},
		// 选择城市
		select_city() {
			uni.navigateTo({
				url: '../address_city/address_city'
			});
		},
		// 选择地区
		select_district() {
			uni.navigateTo({
				url: '../address_district/address_district'
			});
		},
		// 场次
		time_btn(e) {
			let data = {
				cinemaId: e.cinemaId,
				cinemaName: e.cinemaName,
				hallName: e.hallName,
				address: e.address,
				latitude: e.latitude,
				longitude: e.longitude
			};

			uni.navigateTo({
				url: '../schedule/schedule?data=' + JSON.stringify(data)
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
// 头部
.head {
	top: 0;
	position: fixed;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100vw;
	height: 88rpx;
	background: #fff;
	z-index: 2;
	border-bottom: 1rpx solid $template-line;
	&_item {
		position: relative;
	}
	&_item::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: -22rpx;
		margin: auto;
		height: 10rpx;
		width: 10rpx;
		background: linear-gradient(135deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
		transform: rotate(225deg);
	}
}
// 列表
.scroll {
	width: 100vw;
	height: calc(100vh);
	display: flex;
	flex-direction: column;
	&_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 33rpx 0;
		width: 690rpx;
		margin: 0 auto;
		border-bottom: 1rpx solid $template-line;
		&_info {
			display: flex;
			flex-direction: column;
			width: 520rpx;
			&_name {
				font-size: $uni-font-size-lg;
				font-size: $uni-font-size-lg;
				font-weight: 600;
			}
			&_money {
				font-size: $uni-font-size-base;
				color: red;
				&_text {
					text-decoration: line-through;
					color: $uni-text-color-grey;
					margin-right: 8rpx;
				}
			}
			&_address {
				color: $uni-text-color-grey;
				font-size: $uni-font-size-base;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		&_distance {
			font-size: $uni-font-size-lg;
		}
	}
}
// 弹窗
.popup {
	background: #fff;
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	&_city {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 690rpx;
		height: 150rpx;
		margin: 0 auto;
		&_close {
			position: absolute;
			right: 0;
			top: 10rpx;
			padding: 10rpx 20rpx;
		}
		&_title {
			font-size: $uni-font-size-lg;
			font-weight: 600;
			&_row {
				display: flex;
				align-items: center;
				&_name {
					font-size: $uni-font-size-lg;
					background: $template-background;
					color: $uni-text-color-inverse;
					padding: 6rpx 33rpx;
					text-align: center;
					border-radius: 40rpx;
				}
				&_btn {
					font-size: $uni-font-size-lg;
					background: $template-background;
					color: $uni-text-color-inverse;
					padding: 6rpx 33rpx;
					text-align: center;
					border-radius: 40rpx;
					margin-left: 33rpx;
				}
			}
		}
	}
	&_indexed {
		height: calc(100vh - 150rpx);
	}
}
// 空列表
.empty{
	position: fixed;
	top: 88rpx;
	left: 0;
	z-index: 9;
	background: #fff;
	width: 100vw;
	height: 50vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&_img{
		width: 386rpx;
		height: 282rpx;
	}
	&_text{
		margin-top: 8rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
}
</style>
